<template>
	<view class="main">
		<!-- 顶部头像部分 -->
		<div class="avatar" :key="keyNum">
			<view class="u-avatar-wrap">
				<u-avatar :src="avatarUrl ? avatarUrl : ''" size="200" @click="chooseAvatar"></u-avatar>
			</view>
			<div class="nickname">{{userInfo.nickname?userInfo.nickname:'小程序用户' }}</div>
			<div class="tools">
				<button class="edit" @click="toChangeUserInfo"><u-icon name="edit-pen"></u-icon>修改资料</button>
				<button class="edit" @click="toMyTags"><u-icon name="integral"></u-icon>我的标签</button>
			</div>
		</div>
		<!-- 访客部分 -->
		<div class="visitors">
			<u-grid :col="4" :border="false">
				<u-grid-item>
					<view class="grid-text-num">499</view>
					<view class="grid-text-name">喜欢我</view>
				</u-grid-item>
				<u-grid-item>
					<view class="grid-text-num">22</view>
					<view class="grid-text-name">访客数</view>
				</u-grid-item>
				<u-grid-item>
					<view class="grid-text-num">8%</view>
					<view class="grid-text-name">人气值击败</view>
				</u-grid-item>
				<u-grid-item @click="toFollows()">
					<view class="grid-text-num">{{ focusList.length }}</view>
					<view class="grid-text-name">关注</view>
				</u-grid-item>
			</u-grid>
			<u-cell-group>
				<u-cell-item>
					<template v-slot:icon>
						<u-icon size="32" name="bell"></u-icon>
					</template>
					<template v-slot:title v-if="userInfo.popular < 100">
						您的人气值过低
					</template>
					<template v-slot:title v-else-if="userInfo.popular >= 100 && userInfo.popular < 1000">
						您的人气值不错哦
					</template>
					<template v-slot:title v-else="userInfo.popular >= 1000">
						您的人气值很高呀
					</template>
					去提升
				</u-cell-item>
				<u-cell-item>
					<template v-slot:icon>
						<u-icon size="32" name="red-packet"></u-icon>
					</template>
					<template v-slot:title>
						会员特权
					</template>
					<text v-if="!userInfo.isMember">去开通</text>
					<text v-if="userInfo.isMember">去续费</text>
				</u-cell-item>
				<u-cell-item @click="toMyImages">
					<template v-slot:icon>
						<u-icon size="32" name="photo"></u-icon>
					</template>
					<template v-slot:title>
						我的相册
					</template>
				</u-cell-item>
				<u-cell-item>
					<template v-slot:icon>
						<u-icon size="32" name="checkmark-circle"></u-icon>
					</template>
					<template v-slot:title>
						我的认证
					</template>
				</u-cell-item>
				<u-cell-item>
					<template v-slot:icon>
						<u-icon size="32" name="rmb-circle"></u-icon>
					</template>
					<template v-slot:title>
						我的钱包
					</template>
				</u-cell-item>
				<u-cell-item @click="logout">
					<template v-slot:icon>
						<u-icon size="32" name="rewind-right"></u-icon>
					</template>
					<template v-slot:title>
						退出登录
					</template>
					<u-modal v-model="isShowModal" @confirm="confirm" ref="uModal1" :async-close="true"
						content="确定退出登录吗"></u-modal>
				</u-cell-item>
			</u-cell-group>
		</div>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		watch,
		onBeforeMount
	} from 'vue';
	import {
		useUserStore
	} from '../../store/user.js'
	import {
		getUserInfoById,changeAvatar,getFocusList
	} from '../../api/user.js'
	let keyNum = ref(0)
	const userStore = useUserStore()
	let userInfo = ref(uni.getStorageSync('userInfo'))
	
	//点击去关注的人页面
	const avatarUrl = ref('')
	const focusList = ref([])
	const toFollows = () => {
		uni.navigateTo({
			url: '/pages/follows/follows'
		})
	}
	watch(() => {
		
	})
	onBeforeMount(async () => {
		const user = uni.getStorageSync('userInfo')
		//获取用户信息
		const result = await getUserInfoById({
			user_id: user.user_id
		})
		uni.setStorageSync('userInfo',result.data)
		userInfo.value = result.data
		//获取关注的人
		const foc = await getFocusList({
			user_id: user.user_id
		})
		focusList.value = foc.data
		keyNum.value++
	})
	//退出登录
	const isShowModal = ref(false)
	const logout = () => {
		isShowModal.value = true
	}
	const confirm = () => {
		
		uni.setStorageSync('userInfo',{})
		uni.setStorageSync('token','')
		uni.clearStorageSync()
		// userStore.clearToken()
		// userStore.clearUserInfo()
		uni.navigateTo({
			url: '/pages/login/login'
		})
		isShowModal.value = false
		keyNum.value++
	}
	//点击跳转修改个人信息页面
	const toChangeUserInfo = () => {
		uni.navigateTo({
			url: `/pages/changeUserInfo/changeUserInfo`
		})
	}
	// 监听从裁剪页发布的事件，获得裁剪结果
	uni.$on('uAvatarCropper', async path => {
		const file = await uni.request({
			url:path,
			method:'GET',
			responseType:'arraybuffer',
		})
		const base64String = uni.arrayBufferToBase64(file.data)
		const imageUrl = `data:image/png;base64,${base64String}`
		const result = await changeAvatar({
			user_id:userInfo.value.user_id,
			avatar:imageUrl,	
		})
		if(result.code == 1){
			avatarUrl.value = imageUrl;
		}
	})
	//点击修改头像
	const chooseAvatar = () => {
		uni.navigateTo({
			url: '/uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper',
			params: {
				destWidth: 200,
				rectWidth: 100,
				fileType: 'jpg',
			}
		})
	}
	//点击去我的相册
	const toMyImages = () =>  {
		uni.navigateTo({
			url:'/pages/myImages/myImages'
		})
	}
	//点击去我的标签
	const toMyTags = () => {
		uni.navigateTo({
			url:'/pages/myTags/myTags'
		})
	}
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex-direction: column;
		background: linear-gradient(to bottom, #ffe2de, #ffb2d8);

		//顶部头像部分
		.avatar {
			display: flex;
			flex-direction: column;
			text-align: center;

			u-avatar {
				margin: 60rpx 0 20rpx 0;
			}

			.nickname {
				font-size: 36rpx;
				font-weight: 400;
				margin: 0 0 20rpx 0;
			}

			.tools {
				display: flex;
				justify-content: space-evenly;
				margin-bottom: 80rpx;

				.edit {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 24rpx;
					border: 0;
					border-radius: 30rpx;

					u-icon {
						margin-right: 10rpx;
					}
				}
			}
		}

		// 访客部分
		.visitors {
			padding: 20rpx;
			background-color: #fff;
			border-top-left-radius: 40px;
			border-top-right-radius: 40px;

			u-grid {
				margin-bottom: 20rpx;
			}

			u-grid-item {
				font-size: 28rpx;
				margin-top: 4rpx;
				color: $u-type-info;

				.grid-text-num {
					margin-bottom: 20rpx;
				}
			}

			u-cell-group {
				u-icon {
					margin-right: 10rpx;
				}
			}
		}
	}
</style>